<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">折叠面板</h1>
	</header>
	
	<div class="mui-content">
		<!-- 进度条 -->
		<div id="demo1" class="mui-progressbar">
			<span></span>
		</div>
		
		<!-- 面板 -->
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-collapse mui-active">
				<a class="mui-navigate-right" href="">面板1</a>
				<div id="hh" class="mui-collapse-content">
					--------面板1
				</div>
			</li>
			
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="">面板2</a>
				<div id="hh" class="mui-collapse-content">
					------面板2
				</div>
			</li>
		</ul>
		
		<!-- 按钮 -->
		<button type="button" class="mui-btn mui-btn-blue " onclick="showMenu();">打开菜单</button>
		<button type="button" class="mui-btn mui-btn-outlined ">点击我</button>
	
		<!-- 操作列表 -->
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="https://www.baidu.com">百度</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="http://www.hhit.edu.cn">淮海工学院 </a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet1">取消</a>
				</li>
			</ul>
		</div>
		
		<!-- 数字角标 -->
		<span class="mui-badge">1</span>
		<span class="mui-badge mui-badge-primary">12</span>
		<span class="mui-badge mui-badge-success">123</span>
		<span class="mui-badge mui-badge-warning">3</span>
		<span class="mui-badge mui-badge-danger">45</span>
		<span class="mui-badge mui-badge-purple">456</span>
	
	
		<!-- 多选 -->
		<div class="mui-input-row mui-checkbox">
		  <label>上海</label>
		  <input name="checkbox1" value="上海" type="checkbox" checked class="cks">
		</div>
		<div class="mui-input-row mui-checkbox mui-left">
		  <label>南京</label>
		  <input name="checkbox2" value="南京" type="checkbox" class="cks">
		</div>
		<!-- 单选 -->
		<div class="mui-input-row mui-radio mui-left">
		  <label>中国</label>	
		  <input name="checkbox3" value="中国" type="radio" checked>
		</div>
		
		<div class="mui-input-row mui-radio mui-left">
		  <label>美国</label>
		  <input name="checkbox3" value="美国" type="radio">
		</div>
		<button type="button" onclick="getCkValue();">获取值</button>
		
	
		<!-- 获取时间 -->
		<button type="button" onclick="getTime();">获取当前时间</button>
	
		<button type="button" onclick="dhk();">对话框</button>
	
		<!-- 表单 -->
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>用户名</label>
			<input type="text" class="mui-input-clear" placeholder="请输入用户名">
			</div>
			<div class="mui-input-row">
				<label>密码</label>
				<input type="password" class="mui-input-password" placeholder="请输入密码">
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-primary" >确认</button>
				<button type="button" class="mui-btn mui-btn-danger" >取消</button>
			</div>
		</form>
		
		<!-- 图片轮播 -->
		<div class="mui-slider">
		  <div class="mui-slider-group mui-slider-loop">
			<!--支持循环，需要重复图片节点-->
			<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="imgs/tubiao/192.png" /></a></div>
			<div class="mui-slider-item"><a href="#"><img src="imgs/tubiao/96.png" /></a></div>
			<div class="mui-slider-item"><a href="#"><img src="imgs/tubiao/72.png" /></a></div>
			<div class="mui-slider-item"><a href="#"><img src="imgs/tubiao/192.png" /></a></div>
			<!--支持循环，需要重复图片节点-->
			<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="imgs/tubiao/96.png" /></a></div>
		  </div>
		</div>
		
		<!-- 卡片视图 -->
		<div class="mui-card">
			<!--页眉，放置标题-->
			<div class="mui-card-header">
				<div class="mui-card-header mui-card-media">
					<div class="mui-media-body">
					小M
					</div>
				</div>
			</div>
			<!--内容区-->
			<div class="mui-card-content">内容区</div>
			<!--页脚，放置补充信息或支持的操作-->
			<div class="mui-card-footer">页脚</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	mui.plusReady(function () {
		//获得slider插件对象
		var gallery = mui('.mui-slider');
		gallery.slider({
		  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
		});
	})
	
	function showMenu(){
		//传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理；
		mui('#sheet1').popover('toggle');
	}
	
	function getCkValue(){
		var res = getRCheckBoxValue("cks");
		if(res == null || res.length<=0){
			mui.toast("请选择");
			return;
		}
		mui.toast(res);
	}
	
	function getRadioValue(className){
		var cks = document.getElementsByClassName(className);
		var val = null;
		for(i=0; i<cks.length; i++){
			if(cks[i].checked){
				val = cks[i].value;
			}
		}
		return val;
	}
	
	function getRCheckBoxValue(className){
		var cks = document.getElementsByClassName(className);
		var val = new Array();
		var k = 0;
		for(i=0; i<cks.length; i++){
			if(cks[i].checked){
				val[k] = cks[i].value;
				k++;
			}
		}
		return val;
	}
	
	function getTime(){
// 		var dtPicker = new mui.DtPicker(); 
// 		dtPicker.show(function (selectItems) { 
// 			mui.toast(selectItems);
// 			console.log(selectItems.y);//{text: "2016",value: 2016} 
// 			console.log(selectItems.m);//{text: "05",value: "05"} 
// 		})
		var dDate = new Date();
		
		var minDate = new Date();
		minDate.setFullYear(1970, 0 ,1);
		var maxDate = new Date();
		maxDate.setFullYear(2050, 11, 31);
		
		plus.nativeUI.pickDate(
			function(e) {//选择的时间
				var d = e.data;
				mui.toast("您选择的时间是："+d.getFullYear()+"-"+d.get);
			},
			function(e) {//没有选择
				
			},{//配置
				title:"请选择日期",
				date:dDate,
				minDate:minDate,
				maxDate:maxDate
			}
		);
		mui.toast(dDate);
	}
	
	function dhk(){
		//提示框
/* 		mui.alert("你好", "我是标题", "没问题", function(){
			mui.toast("来了老弟");
		}) */
		
		//确认框
		/* mui.confirm('你确定返回？','标题',['取消','确认'],function (e) {
			// 0 取消. 1 确定
			mui.toast(e.index);
		},'div') */
		
		//输入框
		mui.prompt('姓名','默认值','标题',['取消','确认'],function (e) {
				mui.toast(e.value);
		},'div')
		
		
	}
</script>